<template>
  <div class="footer">
    <div class="conter">
      <div class="one">
        <div class="item1">
          <div class="head">bilibili</div>
          <div class="Body">
            <div class="lianxi">
              <p>关于我们</p>
              <p>联系我们</p>
              <p>用户协议</p>
              <p>加入我们</p>
            </div>
            <div class="lianxi">
              <p>友情链接</p>
              <p>隐私政策</p>
              <p>bilibili认证</p>
              <p>Investor Relations</p>
            </div>
          </div>
        </div>
        <div class="item2">
          <div class="head">传送门</div>
          <div class="Body">
            <div class="lianxi">
              <p>协议汇总</p>
              <p>活动中心</p>
              <p>活动专题页</p>
              <p>侵权申诉</p>
            </div>
            <div class="lianxi">
              <p>帮助中心</p>
              <p>用户反馈论坛</p>
              <p>壁纸站</p>
              <p>广告合作</p>
            </div>
            <div class="lianxi">
              <p>名人堂</p>
              <p>MCN管理中心</p>
              <p>高级弹幕</p>
              <p>企业号官网</p>
            </div>
          </div>
        </div>
        <div class="item3">
          <div class="icon">
            <div><span class="iconfont icon-xiazai"></span></div>
            <p>下载APP</p>
          </div>
          <div class="icon">
            <div><span class="iconfont icon-gongyi"></span></div>
            <p>公益</p>
          </div>
          <div class="icon">
            <div><span class="iconfont icon-weibo"></span></div>
            <p>新浪微博</p>
          </div>
          <div class="icon">
            <div><span class="iconfont icon-weixin1"></span></div>
            <p>官方微信</p>
          </div>
        </div>
      </div>
      <div class="tow">
        <div class="fimg">
          <img src="../../../assets/img/footer/footer1.png" alt="" />
          <img src="../../../assets/img/footer/footer2.png" alt="" />
        </div>
        <div class="fzi">
          <p>
            <span>营业执照 </span>&nbsp;&nbsp; 网络文化经营许可证
            沪网文【2019】3804-274号&nbsp;&nbsp;
            广播电视节目制作经营许可证：（沪）字第01248号
            &nbsp;&nbsp;增值电信业务经营许可证 沪B2-20100043
          </p>
          <p>
            互联网ICP备案：<span>沪ICP备13002172号-3</span>
            &nbsp;&nbsp;出版物经营许可证 沪批字第U6699 号
            &nbsp;&nbsp;互联网药品信息服务资格证
            沪-非经营性-2016-0143&nbsp;&nbsp; 营业性演出许可证
            沪市文演（经）00-2253
          </p>
          <p>
            不良信息举报邮箱：help@bilibili.com |
            涉未成年举报邮箱：teenprotect@bilibili.com |
            不良信息举报电话：4006262233转1
          </p>
          <p>
            <span>上海互联网举报中心</span
            >&nbsp;|&nbsp;<span>12318全国文化市场举报网站</span>&nbsp;|&nbsp;<span>沪公网安备31011002002436号</span>&nbsp;|&nbsp;<span
              >儿童色情信息举报专区</span
            >
          </p>
          <p>
            网上有害信息举报专区：<span>中国互联网违法和不良信息举报中心</span>
          </p>
          <p>
            亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
          </p>
          <p>
            公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.footer {
  width: 100%;
  height: 432px;
  margin-top: 40px;
  background-color: #f6f9fa;
  padding: 40px 0px 0px 0px;
  box-sizing: border-box;
  .conter {
    width: 1160px;
    margin: auto;
    .one {
      width: 100%;
      height: 150px;
      // background-color: aqua;
      display: flex;
      .item1 {
        flex: 2;
        .head {
          width: 100%;
          height: 30px;
          color: #999999;
          // background-color: cadetblue;
        }
        .Body {
          width: 100%;
          height: 120px;
          // background-color: lime;
          display: flex;
          .lianxi {
            flex: 1;
            display: flex;
            flex-direction: column;
            p {
              font-size: 14px;
              margin-top: 10px;
            }
            p:hover {
              color: #00a1d6;
              cursor: pointer;
            }
          }
        }
      }
      .item2 {
        flex: 3;
        // background-color: bisque;
        padding-left: 40px;
        box-sizing: border-box;
        border-left: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        .head {
          width: 100%;
          height: 30px;
          color: #999999;
          // background-color: cadetblue;
        }
        .Body {
          width: 100%;
          height: 120px;
          // background-color: lime;
          display: flex;
          .lianxi {
            flex: 1;
            display: flex;
            flex-direction: column;
            p {
              margin-top: 10px;
              font-size: 14px;
            }
            p:hover {
              color: #00a1d6;
              cursor: pointer;
            }
          }
        }
      }
      .item3 {
        flex: 2;
        display: flex;
        padding-left: 40px;
        box-sizing: border-box;
        .icon {
          flex: 1;
          text-align: center;
          // background-color: magenta;
          div {
            width: 50px;
            height: 50px;
            margin: auto;
            margin-top: 40px;
            border-radius: 50%;
            background-color: #585f69;
            position: relative;
            span {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: white;
              font-size: 26px;
            }
          }

          p {
            margin-top: 10px;
            font-size: 14px;
          }
        }
        .icon:hover {
          color: #00a1d6;
          cursor: pointer;
        }
        .icon:nth-child(2) > div {
          background-color: #00aeec;
        }
        .icon:nth-child(3) > div {
          background-color: #fe596c;
        }
        .icon:nth-child(4) > div {
          background-color: #42c86b;
        }
      }
    }
    .tow {
      margin-top: 20px;
      display: flex;
      height: 192px;
      // background-color: magenta;
      .fimg {
        width: 100px;
        margin-right: 20px;
        // background-color: maroon;
        img {
          width: 100%;
          margin-bottom: 2px;
        }
      }
      .fzi {
        flex: 1;
        // background-color: mediumaquamarine;
        p {
          font-size: 12px;
          color: #999999;
          span:hover {
            color: #00a1d6;
            cursor: pointer;
          }
          line-height: 26px;
        }
      }
    }
  }
}
</style>